<template>
	<view>
		<status-bar title="绩效考核" />
		<view class="head padding20">
			<view class="inside wh bgwhite d-flex a-center" @click="showPicker = true">
				<view class="size28">部门：</view>
				<view class="flex-1 size28 color-666">{{ deptName || '请选择' }}</view>
				<text class="iconfont icon-a-zujian32 size24 color-999"></text>
			</view>
		</view>
		<view class="title d-flex j-sb a-center">
			<view class="size28 bold">部门人员</view>
			<view class="size28 bold">绩效评级</view>
		</view>
		<view class="panel" v-for="(item,index) in list" :key="index">
			<view class="d-flex a-center" @click="current = index">
				<image class="avatar m-right20" :src="item.avatar ? imgUrls(item.avatar) : staticImg + 'noExist.jpg'" mode="aspectFill"></image>
				<view class="flex-1 size28 color-222">{{ item.ename }}</view>
				<view class="size28" :style="{color: getColor(item)}">{{ item.scoreDesc }}</view>
				<text class="iconfont icon-a-zujian32 size24 color-999 m-left20" :class="{'active': current == index}"></text>
			</view>
			<block v-if="current == index">
				<view class="table m-top20">
					<view class="label d-flex a-center">
						<view class="first">工作任务</view>
						<view class="flex-1">倒计时</view>
						<view class="third">完成情况</view>
						<view class="fourth">得分</view>
					</view>
					<view class="value d-flex a-center" v-for="(subItem,subIndex) in item.sysUserTaskList" :key="subIndex">
						<view class="first ellipsis_1">{{ subItem.taskName }}</view>
						<view class="flex-1">{{ subItem.diffDay }}天</view>
						<view class="third">
							<text class="iconfont icon-zhengque-fill size32 m-right6" v-if="subItem.status == 1"></text>
							<text class="iconfont icon-cuowu-fill size32 m-right6" v-if="subItem.status == 2"></text>
							<text class="size24">{{ subItem.statusName }}</text>
						</view>
						<view class="fourth color-222 bold">{{ subItem.score }}</view>
					</view>
				</view>
				<view class="size24 color-999 text-center m-top20">得分率：{{ item.score }}</view>
			</block>
		</view>
		
		<up-empty :show="noData" mode="list" marginTop="100"></up-empty>
		
		<up-picker :show="showPicker" :columns="deptList" keyName="deptName" @cancel="showPicker = false" @confirm="confirmPicker"></up-picker>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js'
	import { Toast, imgUrls } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const list = ref([])
	const noData = ref(false)
	const current = ref(0)
	
	onLoad((e) => {
		if(e.deptName) deptName.value = e.deptName
		getDepts()
	})
	
	const getList = () => {
		noData.value = false
		Http.post({
			url: '/hr/task/performanceAppraisal',
			data: {
				depetId: deptId.value
			},
			Typejson: false
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			list.value = res.data || []
			if(!list.value.length) noData.value = true
		})
	}
	
	const deptList = ref([[]])
	const deptId = ref('')
	const deptName = ref('')
	const showPicker = ref(false)
	
	const getDepts = () => {
		Http.get({
			url: '/hr/getDeptList'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.data || []
			deptList.value[0] = result
			if(!result.length) return
			if(deptName.value) {
				let obj = result.find(item => item.deptName == deptName.value)
				if(obj) deptId.value = obj.deptId
			} else {
				deptId.value = result[0].deptId
				deptName.value = result[0].deptName
			}
			getList()
		})
	}
	
	const confirmPicker = (e) => {
		let item = e.value[0]
		deptId.value = item.deptId
		deptName.value = item.deptName
		getList()
		showPicker.value = false
	}
	
	const getColor = (item) => {
		switch (item.scoreDesc){
			case '及格':
				return '#999'
			case '不及格':
				return '#EB212B'
			default: // 优秀
				return '#222'
		}
	}
</script>

<style lang="scss" scoped>  
	.head {
		height: 140rpx;
		background: #F9F9F9;
		.inside {
			border-radius: 20rpx;
			padding: 0 20rpx;
		}
	}
	.title {
		height: 92rpx;
		border-bottom: 1rpx solid #E1E1E1;
		padding: 0 20rpx;
	}
	.panel {
		border-bottom: 1rpx solid #E1E1E1;
		padding: 30rpx 20rpx;
		.avatar {
			width: 66rpx;
			height: 66rpx;
			border-radius: 10rpx;
		}
		.active {
			transform: rotate(90deg);
			transition: transform 0.1s ease-in-out;
		}
		.table {
			border: 1rpx solid #E1E1E1;
			border-radius: 10rpx;
			.label, .value {
				height: 66rpx;
				padding: 0 26rpx;
				>view {
					font-size: 24rpx;
					&:not(:first-child) {
						text-align: right;
					}
				}
				.first, .third {
					width: 200rpx;
				}
				.fourth {
					width: 160rpx;
				}
			}
			.label {
				background: #EEEFF3;
				color: #222;
				font-weight: bold;
			}
			.value {
				border-top: 1px solid #E1E1E1;
				color: #666;
				.icon-zhengque-fill {
					vertical-align: bottom;
					color: #12B7BD;
				}
				.icon-cuowu-fill {
					vertical-align: bottom;
					color: #FF575F;
				}
			}
		}
	}
</style>
